import React from 'react'
import {connect} from 'react-redux'
import './vip-goods.css'
import {withRouter} from 'react-router-dom'
import {Toast, WhiteSpace, WingBlank} from "antd-mobile"
import TitleQuota from "../../res/images/web/game-room/title-symbol.png"
import AgreeIconCheck from "../../res/images/web/game-room/choose agree-selected@2x.png"
import AgreeIconEmpty from "../../res/images/web/game-room/choose agree@2x.png"
import CustomButton from "../../shared-components/CustomButton/CustomBotton"
import RedNickNameIcon from "../../res/images/web/VipGoods/tequan／nickname@2x.png"
import InfoIcon from "../../res/images/web/VipGoods/tequan／news@2x.png"
import NoAdsIcon from "../../res/images/web/VipGoods/tequan／no ad@2x.png"
import RoomIcon from "../../res/images/web/VipGoods/tequan／rooms@2x.png"
import AddRoomIcon from "../../res/images/web/VipGoods/房券加量@2x.png"
import HonorIcon from "../../res/images/web/VipGoods/tequan／vip id@2x.png"
import FreeGiftIcon from "../../res/images/web/VipGoods/tequan／gift@2x.png"
import fatieFreeIcon from "../../res/images/web/VipGoods/tequan／fatie free@2x.png"
import ChangeNameIcon from "../../res/images/web/VipGoods/tequan／change free@2x.png"
// import FreeCoinIcon from "../../res/images/web/VipGoods/tequan／goal coin@2x.png"
import {log, getDom, getDoms,} from "../../utils/commonfunc";
import LocalStorageService from "../../utils/LocalStorageService"
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout"
import VipModal from "../../shared-components/VipModal/VipModal"
import VipCard from "../../shared-components/VipCard/VipCard"
import {app_name} from "../../utils/constants";
import YearCard from "../../shared-components/VipCard/YearCard";
// import {formatDate} from "../../utils/dateService";


class VipGoods extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            modalShow: false,
            agree: false,
            index: 0,
            start: 0,
            payStyle: 201,
        }
    }

    componentDidMount() {

        const flag = this.props.user.userdetail.initFlag
        const uid = LocalStorageService.get('userid')
        const login = LocalStorageService.get('isLogin')
        if (flag === 0 && login) {
            this.props.fetchUserDetail({uid})
        }

    }

    onModalClose = () => {
        this.setState({
            modalShow: false,
        })
    }

    checkAgree = () => {
        if (this.state.agree) {
            return true
        } else {
            Toast.info('请先阅读并同意协议和政策', 1)
            return false
        }
    }

    showModal = (payStyle) => {
        if (this.checkAgree()) {
            this.setState({
                payStyle,
            }, () => {
                this.setState({modalShow: true,})
            })
        }
    }

    onTouchStart = (e) => {
        let point = e.touches[0]
        let start = point.screenX
        this.setState({
            start,
        })
    }

    onTouchMove = (e) => {
        let point = e.touches[0]
        let start = this.state.start
        let end = point.screenX
        let index = this.state.index
        let diff = end - start
        if (diff < 0) {
            if (index === 0) {
                this.setState({
                    index: 1,
                })
            }
        } else if (diff > 0) {
            if (index === 1) {
                this.setState({
                    index: 0,
                })
            }
        }
    }

    onTouchEnd = (e) => {
        this.setState({
            start: 0,
        })
    }

    buyRoomJuan = (style) => {
        const userDetail = this.props.user.userdetail
        const isYearVip = userDetail.Supervip > 0
        if (isYearVip) {
            this.showModal(style)
        } else {
            Toast.info('加量房券仅年费版会员可购买', 1)
        }
    }

    render() {

        const userDetail = this.props.user.userdetail
        const myCoin = userDetail.Gold
        const agree = this.state.agree
        const isVip = userDetail.Vip > 0
        const isYearVip = userDetail.Supervip > 0
        // console.log(formatTime)

        const btnProps = {
            color: agree ? '#F3C46C' : 'rgba(51,51,51,0.4)',
            bg: agree ? 'linear-gradient(180deg,rgba(119,90,19,1) 0%,rgba(66,46,8,1) 100%)' : '#E9E6EA',
            shadow: agree ? '0px 4px 10px 0px rgba(74,53,19,0.5)' : '',
        }


        let benefitsList = [
            {iconUrl: RedNickNameIcon, title: '昵称红名',},
            {iconUrl: InfoIcon, title: '可看情报',},
            {iconUrl: NoAdsIcon, title: '免广告',},
            {iconUrl: fatieFreeIcon, title: '发帖无限制',},
            {iconUrl: FreeGiftIcon, title: '丰富道具礼物',},
            // {iconUrl: HonorIcon, title: '尊贵身份',},
            // {iconUrl: FreeGiftIcon, title: '380金币道具',},
            // {iconUrl: ChangeNameIcon, title: '改名无限制',},
            // {iconUrl: FreeCoinIcon, title: '380金币',},
        ]
        if (this.state.index === 0) {
            benefitsList.unshift(
                {iconUrl: RoomIcon, title: 'VIP房卷',},
            )
        }

        const benefitsTemplate = (benefitsList.map(benefit => (
            <div key={benefit.title} className='vip-goods-item'>
                <img src={benefit.iconUrl} alt=''/>
                <p>{benefit.title}</p>
            </div>
        )))

        const width = window.innerWidth * 0.8
        const ctnW = window.innerWidth - 48
        const w = ctnW - width - 12
        const translateX = width - w
        const carouselItemStyle = {
            width: width,
            flexShrink: 0,
            flexGrow: 0,
            transform: `translateX(-${translateX * this.state.index}px)`,
            transition: 'all 0.5s',
        }

        const monthTemplate = <div className="pd-l-r-16px fade-in">
            <div className='vip-goods-list-ctn flex-space-between-align-center flex-wrap-container fade-in' style={{marginBottom: '64px',}}>
                <div className='game-room-vip-benefit-title-ctn mg-b-16px'>
                    <img src={TitleQuota} alt=''/>
                    <p className='game-room-vip-benefit-title'>
                        专享权益
                    </p>
                    <img src={TitleQuota} alt=''/>
                </div>
                <div className='flex-align-center flex-wrap-container' style={{width: '100%',}}>
                    {benefitsTemplate}
                </div>
            </div>
            <div>
                <div className='vip-goods-btn-ctn' onClick={() => this.setState({agree: !this.state.agree})}>
                    <img src={agree ? AgreeIconCheck : AgreeIconEmpty} alt='' style={{height: 12, width: 12,}} />
                    <span>开通会员视为同意<span
                        onClick={() => this.props.history.push('../deposit-policy')}
                    >《{app_name}充值协议》</span></span>
                </div>
                <CustomButton
                    // color='#F3C46C'
                    // bg='linear-gradient(180deg,rgba(119,90,19,1) 0%,rgba(66,46,8,1) 100%)'
                    // shadow='0px 4px 10px 0px rgba(74,53,19,0.5)'
                    {...btnProps}
                    onClick={() => this.showModal(100)}
                >{isVip ? '立即续费' : '我要开通'}</CustomButton>
            </div>
        </div>
        const yearTemplate = <div className="pd-l-r-16px fade-in">
            <div className='vip-goods-list-ctn flex-space-between-align-center flex-wrap-container fade-in' style={{marginBottom: '64px',}}>
                <div className='game-room-vip-benefit-title-ctn mg-b-16px'>
                    <img src={TitleQuota} alt=''/>
                    <p className='game-room-vip-benefit-title'>
                        专享权益
                    </p>
                    <img src={TitleQuota} alt=''/>
                </div>
                <div className='flex-align-center flex-wrap-container' style={{width: '100%',}}>
                    {benefitsTemplate}
                </div>
            </div>
            <div className='mg-b-24px'>
                <div className='vip-goods-btn-ctn' onClick={() => this.setState({agree: !this.state.agree})}>
                    <img src={agree ? AgreeIconCheck : AgreeIconEmpty} alt='' style={{height: 12, width: 12,}} />
                    <span>开通会员视为同意<span
                        onClick={() => this.props.history.push('../deposit-policy')}
                    >《{app_name}充值协议》</span></span>
                </div>
                <CustomButton
                    // color='#F3C46C'
                    // bg='linear-gradient(180deg,rgba(119,90,19,1) 0%,rgba(66,46,8,1) 100%)'
                    // shadow='0px 4px 10px 0px rgba(74,53,19,0.5)'
                    {...btnProps}
                    onClick={() => this.showModal(201)}
                >{isYearVip ? '立即续费' : '我要开通'}</CustomButton>
            </div>
            <div className='game-room-vip-benefit-title-ctn mg-b-12px'>
                <img src={TitleQuota} alt=''/>
                <p className='game-room-vip-benefit-title'>
                    房券加量
                </p>
                <img src={TitleQuota} alt=''/>
            </div>
            {[[3, 15, 202], [5, 25, 203], [10, 50, 204],].map(([count, price, style,], index) => {
                return <div
                    style={{
                        width: '100%',
                        padding: '12px 16px',
                        background: '#FFFFFF',
                        borderRadius: '4px',
                        boxSizing: "border-box"
                    }}
                    key={index}
                    className='flex-space-between-align-center mg-b-4px'
                >
                    <div className='flex-align-center'>
                        <img src={AddRoomIcon} alt='' style={{width: 45, height: 26, marginRight: '24px',}}/>
                        <div>
                            <p className='mg-b-4px'>VIP房券×{count}张</p>
                            <div className='mg-b-4px'>
                                <span style={{
                                    display: 'inline-block',
                                    background: 'rgba(250, 114, 104, 0.16)',
                                    fontSize: '12px',
                                    padding: '4px',
                                    color: '#FF4A3C',
                                    marginRight: '2px',
                                }}>专项</span>
                                <span style={{
                                    display: 'inline-block',
                                    background: 'rgba(250, 114, 104, 0.16)',
                                    fontSize: '12px',
                                    padding: '4px',
                                    color: '#FF4A3C',
                                }}>五折</span>
                            </div>
                            <div>
                                <span style={{fontSize: '16px',}}>¥{price}</span>
                                <span className='gray-text' style={{fonSize: '12px', marginLeft: '4px', textDecoration: 'line-through',}}>¥{price * 2}</span>
                            </div>
                        </div>
                    </div>
                    <div
                        style={{
                            width: '68px',
                            height: '28px',
                            background: '#FFFFFF',
                            borderRadius: '14px',
                            border: isYearVip ? '1px solid #FF4A3C' : '1px solid rgba(51, 51, 51, 0.4)',
                            textAlign: 'center',
                            lineHeight: '28px',
                            color: isYearVip ? '#FF4A3C' : 'rgba(51, 51, 51, 0.4)',
                        }}
                        onClick={() => this.buyRoomJuan(style)}
                    >
                        立即抢
                    </div>
                </div>
            })}
        </div>

        return <GoBackLayout
            title='会员权益'
            history={this.props.history}
            toIndex={'./my'}
        >
            <VipModal
                visible={this.state.modalShow}
                onModalClose={this.onModalClose}
                myCoin={myCoin}
                style={this.state.payStyle}
            />
            <div className='vip-goods-ctn'>
                <WhiteSpace size='xl'/>
                <div
                    className='flex mg-b-24px'
                    style={{overflow: "hidden", padding: '0 24px',}}
                    onTouchStart={(e) => this.onTouchStart(e)}
                    onTouchMove={(e) => this.onTouchMove(e)}
                    onTouchEnd={(e) => this.onTouchEnd(e)}
                >
                    <div style={{...carouselItemStyle, marginRight: '12px',}}>
                        <YearCard icon/>
                    </div>
                    <div style={carouselItemStyle}>
                        <VipCard icon/>
                    </div>
                </div>
                {this.state.index === 0 && yearTemplate}
                {this.state.index === 1 && monthTemplate}
            </div>
        </GoBackLayout>
    }
}

const mapState = state => ({
    user: state.user,
})

const mapDispatch = dispatch => ({
    fetchUserDetail: (id) => dispatch.user.fetchUserDetail(id),
})

export default connect(mapState, mapDispatch)(withRouter(VipGoods))
